<template>
    <div class="fxfkRight">
        <Title :titles="$store.state.fxfkRightContent.type" />
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane
                v-for="(item, index) in tabsList"
                :key="item"
                :name="item"
                :label="item"
            >
                <div :id="'themePicFxffChart' + index"></div>
            </el-tab-pane>
        </el-tabs>
        <div class="small">
            <el-row>
                <el-col :span="8" v-if="isAll">
                    <el-select v-model="cityValue" placeholder="请选择">
                        <el-option
                            v-for="item in cityOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-input :placeholder="placeholderVal" v-model="inputVal">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button
                        class="sousuo"
                        icon="el-icon-search"
                        @click="zySearch"
                    ></el-button>
                </el-col>
            </el-row>

            <div class="resultNum">查询结果：共{{ totalNum }}条记录</div>
            <div class="dataList">
                <div
                    class="dataListItem"
                    v-for="(item, index) in dataList"
                    :key="item"
                >
                    <div class="itemTop">
                        <span class="order">{{ orderList[index] + 1 }}、</span>
                        <span class="itemName">{{ item.name }}</span>
                    </div>
                    <div class="link">
                        <span class="linkPro">联系人：</span>
                        <span class="linkContent"
                            >{{ item.charge }} 联系电话：{{ item.phone }}</span
                        >
                    </div>
                    <div class="itemBottom" @click="flyTo(item)">
                        <span
                            class="locationIcon el-icon-location-information"
                        ></span>
                        <span class="location">地址：{{ item.address }}</span>
                    </div>
                </div>
            </div>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="prev, pager, next"
                :pager-count="5"
                :total="totalNum"
            >
            </el-pagination>
            <div class="exportExcel" @click="exportExcel">报表生成</div>
        </div>
        <div class="big">
            <div class="select" v-if="$store.state.userRegion=='海南省'">
                <el-select v-model="cityValue" placeholder="请选择">
                    <el-option
                        v-for="item in cityOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
                <el-input :placeholder="placeholderVal" v-model="inputVal">
                </el-input>
                <el-button
                    class="sousuo"
                    icon="el-icon-search"
                    @click="zySearch"
                ></el-button>
            </div>
            <div class="resultNum">查询结果：共{{ totalNum }}条记录</div>
            <div class="table">
                <div class="tBody">
                    <div
                        class="bodyItem"
                        v-for="(item, index) of dataList"
                        :key="index"
                        @click="flyTo(item)"
                    >
                        <div class="bodyItem1">
                            <p class="order">{{ orderList[index] + 1 }}、</p>
                            <p>{{ item.name ? item.name : item.address }}</p>
                        </div>
                        <div class="bodyItem2">
                            <p>联系人:{{ item.charge }};</p>
                            <p>联系电话:{{ item.phone }};</p>
                            <p class="pImg">
                                <img src="/images/sjzx/local.png" alt="" />
                                <!-- {{item.address}} -->
                            </p>
                        </div>
                    </div>
                </div>
                <div class="pagenation">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        layout="prev, pager, next"
                        :pager-count="5"
                        :total="totalNum"
                    >
                    </el-pagination>
                </div>
            </div>
            <div class="reportBtn">
                <p @click="exportExcel">生成报表</p>
            </div>
        </div>
    </div>
</template>

<script>
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import Title from "../left/LittleTitle.vue";
import echarts from "echarts";
import axios from "axios";

export default {
    components: {
        Title,
    },
    setup() {
        let placeholderVal = ref("请输入名称或地址");
        let cityValue = ref("");
        let cityOptions = ref([]);
        let store = useStore();
        let inputVal = ref("");
        let currentPage = ref(1);
        let isAll = ref(true);
        let activeName = ref("second");
        let totalNum = ref(0);
        let tabsList = ref([]);
        let echartsUrl = ref([]);
        let dataList = ref([]);
        let searchUrl = ref("");
        let orderList = ref([]);
        let exportUrl = ref("");
        //tab切换时，渲染echarts
        const userRegion = computed(() => {
            return store.state.userRegion;
        });
        
        if (userRegion.value == "海南省") {
            isAll.value = true;
        } else {
            isAll.value = false;
            cityValue.value = userRegion.value;
        }
        const handleTabClick = (tab) => {
            let index = tab.index;
            axios.get(`${sjzxUrl}${echartsUrl.value[index]}`).then((res) => {
                let vData = res.data.data;
                let xData = vData.map((item) => {
                    return item.name;
                });
                let yData = vData.map((item) => {
                    return item.count;
                });
                drawChart("themePicFxffChart" + index, xData, yData);
            });
        };
        //默认执行一次监听，渲染echarts 以及列表
        watch(
            () => store.state.fxfkRightContent,
            (newValue) => {
                //tab切换列表
                // if(newValue.echarts){

                // }
                tabsList.value = newValue.echarts;
                //echarts数据 地址 列表
                console.log(newValue.item.kbApiDistribution);
                if (
                    newValue.item.kbApiDistribution != null &&
                    newValue.item.kbApiDistribution != "没有"
                ) {
                    if (newValue.item.kbApiDistribution.indexOf("[") > -1) {
                        echartsUrl.value = JSON.parse(
                            newValue.item.kbApiDistribution
                        );
                    } else {
                        echartsUrl.value = [newValue.item.kbApiDistribution];
                    }
                }
                console.log(echartsUrl.value);
                // if(newValue.item.kbApiDistribution!=null){
                //     echartsUrl.value = JSON.parse(newValue.item.kbApiDistribution);
                // }
                //tab页默认显示第一个列表
                activeName.value = newValue.echarts[0];
                //获取报表输出url
                exportUrl.value = newValue.item.kbApiDownload;
                if (newValue.type == "三防责任人信息") {
                    placeholderVal.value = "请输入姓名或地址";
                } else {
                    placeholderVal.value = "请输入名称或地址";
                }
                //请求第一个echarts数据，即市县数据
                axios.get(`${sjzxUrl}${echartsUrl.value[0]}`).then((res) => {
                    let vData = res.data.data;
                    let xData = vData.map((item) => {
                        return item.name;
                    });
                    let yData = vData.map((item) => {
                        return item.count;
                    });
                    nextTick(() => {
                        drawChart("themePicFxffChart0", xData, yData);
                    });
                });
                searchUrl.value = newValue.item.kbApiCondition;
                //默认搜索全部数据
                let listUrl = `${sjzxUrl}${searchUrl.value}?current=1&size=10&division=${cityValue.value}&condition=${inputVal.value}`
                if (userRegion.value == "海南省") {
                    
                } else {
                    listUrl = `${sjzxUrl}${searchUrl.value}?current=1&size=10&addvcd=${window.regionCode[userRegion.value]}&condition=${inputVal.value}`
                }
                axios.get(listUrl).then((res) => {
                        totalNum.value = res.data.data.total;
                        dataList.value = res.data.data.records;
                        orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    });

                axios
                    .get(
                        `${sjzxUrl}/api/v2/sanFang/getAdministrativeDivision?sign=${newValue.item.kbId}`
                    )
                    .then((res) => {
                        cityOptions.value = res.data.data.filter((item) => {
                            return item != null;
                        });
                        cityOptions.value.unshift("全部");
                    });
            },
            { immediate: true }
        );
        const flyTo = (item) => {
            let labelDistance = {
                //476772,109580,109580
                全市: [1000000, 109580],
                全县: [1000000, 109580],
                全区: [1000000, 109580],
                全镇: [109580, 25088],
                全乡: [109580, 25088],
                全村: [25088, 0],
            };
            if (
                item.distance == "全市" ||
                item.distance == "全县" ||
                item.distance == "全区"
            ) {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(item.lng),
                        parseFloat(item.lat),
                        119580
                    ),
                });
            } else if (item.distance == "全镇" || item.distance == "全乡") {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(item.lng),
                        parseFloat(item.lat),
                        25088
                    ),
                });
            } else if (item.distance == "全村") {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(item.lng),
                        parseFloat(item.lat),
                        8000
                    ),
                });
            } else {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(item.lng),
                        parseFloat(item.lat),
                        8000
                    ),
                });
            }
        };
        const drawChart = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            //字体大小
            let bw = 0;
            let bw1 = 0;
            if (screen.width < 2000) {
                bw = 12;
                bw1 = 14;
            } else if (screen.width > 3000) {
                bw = 16;
                bw1 = 16;
            }
            let option = {
                animation: false,
                grid: {
                    left: "10%",
                    right: "0%",
                    top: "17%",
                    bottom: "50%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: bw,
                        rotate: 30,
                    },
                },
                yAxis: {
                    name: "单位:个",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: bw1,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: bw,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: bw,
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        //生成连续数字
        const progressiveArray = (start, end) => {
            start = Number(start);
            end = Number(end);
            end = end > start ? end : start;
            return [...Array(end + 1).keys()].slice(start);
        };
        //点击各个页码的方法
        let pageSize = 10;
        const handleCurrentChange = (currentPage) => {
            let from = (currentPage - 1) * pageSize;
            let to = currentPage * pageSize;
            axios
                .get(
                    `${sjzxUrl}${searchUrl.value}?current=${currentPage}&size=10&division=${cityValue.value}&condition=${inputVal.value}`
                )
                .then((res) => {
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = progressiveArray(from, to);
                    console.log(orderList.value);
                });
        };
        //搜索按钮
        const zySearch = () => {
            axios
                .get(
                    `${sjzxUrl}${searchUrl.value}?current=1&size=10&division=${
                        cityValue.value == "全部" ? "" : cityValue.value
                    }&condition=${inputVal.value}`
                )
                .then((res) => {
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                });
        };
        const handleSizeChange = (size) => {};
        const exportExcel = () => {
            window.open(
                `${sjzxUrl}${exportUrl.value}?division=${
                    cityValue.value == "全部" ? "" : cityValue.value
                }&condition=${inputVal.value}`
            );
        };
        onMounted(() => {});
        return {
            //下拉框
            cityValue,
            cityOptions,
            //搜索框
            inputVal,
            //页数变化，翻页
            totalNum,
            orderList,
            currentPage,
            handleSizeChange,
            handleCurrentChange,
            //数据列表
            dataList,
            //导出报表方法
            exportExcel,
            //tab切换
            activeName,
            handleTabClick,
            tabsList,
            zySearch,
            flyTo,
            placeholderVal,
            isAll,
        };
    },
};
</script>
<style scoped>
@media (max-width: 2880px) {
    .dataList::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .dataList::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }
    .dataList::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.5);
    }
}
@media (min-width: 3000px) {
    .dataList::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .dataList::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }
    .dataList::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.5);
    }
    .el-tabs {
        background: url("/images/sjzx/panelBg.png") no-repeat;
        background-size: 100% 100%;
        padding-top: 10px;
    }
}
</style>
<style>
.sjzxLeftThemePicFxff .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    color: #000;
}
.el-select-dropdown__list span {
    color: #000;
}
</style>
<style lang="stylus" >
@media (max-width: 2880px) {
    .fxfkRight {
        color: #fff;

        .big {
            display: none;
        }

        .small {
            display: block;
        }

        .el-button {
            background: transparent;
            border: 1px solid #00EAFF;
            color: #fff;
        }

        .el-tabs__header {
            width: vw(350);
            margin: 0 0 vh(18);
            margin-top: vh(18);
            z-index: 19;

            .el-tabs__nav-wrap {
                height: vh(30);
                line-height: vh(30);
                // min-width: vw1(2000);
                background: rgba(4, 34, 45, 0.37);

                .el-tabs__nav-prev, .el-tabs__nav-next {
                    line-height: vh(30);
                    color: #fff;
                    font-size: vw(16);
                }

                .el-tabs__item {
                    height: vh(30);
                    min-width: vw(170);
                    color: #fff;
                    line-height: vh(30);
                    font-size: vw(16);
                    text-align: center;
                }

                .el-tabs__item.is-active {
                }

                .el-tabs__active-bar {
                    width: vw(10);
                    background-color: #26cffe;
                }

                &::after {
                    visibility: hidden;
                    // background-color: none;
                }
            }
        }

        .el-tabs__content {
            z-index: 19;
            position: relative;
            width: vw(350);
            height: vh(230);

            .button-box {
                position: absolute;
                right: 0;
                top: vh(10);

                span {
                    width: vw(40);
                    background: #023245;
                    display: inline-block;
                    height: vw(40);
                    line-height: vh(40);
                    text-align: center;
                    margin-right: vw(20);
                    font-size: vw(30);
                    color: #5cecff;
                    cursor: pointer;
                    border-radius: vw(6);
                    pointer-events: all;
                }
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .resultNum {
            margin-top: vh(10);
            margin-bottom: vh(10);
        }

        .exportExcel {
            width: vw(100);
            height: vh(30);
            line-height: vh(30);
            border: 1px solid #00EAFF;
            text-align: center;
            border-radius: 3px;
            float: right;
            margin-top: vh(30);
            cursor: pointer;
        }

        .exportExcel:hover {
            background: #00E5FD;
            color: #000;
        }

        .el-input__inner {
            background: transparent;
            border: 1px solid #00E5FD;
            height:vh(42);
        }

        .el-input-group__append, .el-input-group__prepend {
            background: transparent;
            border: 1px solid #00E5FD;
        }

        #themePicFxffChart0 {
            width: vw(330);
            height: vh(250);
        }

        #themePicFxffChart1 {
            width: vw(330);
            height: vh(220);
        }

        #themePicFxffChart2 {
            width: vw(330);
            height: vh(220);
        }

        .dataList {
            height: vh(400);
            overflow-y: scroll;
            margin-bottom: vh(20);

            .dataListItem {
                padding-bottom: vh(10);
                padding-top: vh(10);
                border-bottom: 1px solid #ddd;

                .itemTop {
                    .order {
                        display: inline-block;
                        min-width: vw(20);
                        height: vh(20);
                        margin-right: vw(10);
                        text-align: center;
                        background: #00EAFF;
                        font-size: vw(16);
                        line-height: vh(20);
                        color: #000;
                    }

                    .itemName {
                        font-size: vw(16);
                        height: vh(20);
                        line-height: vh(20);
                    }
                }

                .link {
                    .linkPro {
                        font-size: vw(14);
                        height: vh(18);
                        line-height: vh(18);
                    }

                    .linkContent {
                        font-size: vw(14);
                        height: vh(18);
                        line-height: vh(18);
                    }
                }

                .itemBottom {
                    .locationIcon {
                        color: #00EAFF;
                        font-size: vw(14);
                        height: vh(18);
                        line-height: vh(18);
                    }

                    .location {
                        color: #00EAFF;
                        font-size: vw(14);
                        height: vh(18);
                        line-height: vh(18);
                    }
                }
            }
        }
    }
}
</style>
<style lang="stylus" >
@media (min-width: 3000px) {
    .fxfkRight {
        color: #fff;

        .big {
            display: block;
        }

        .small {
            display: none;
        }

        .el-tabs__header {
            // width: vw(350);
            width: 100%;
            margin: 0 0 vh(18);
            // margin-top: vh(18);
            z-index: 19;
            margin-left: vw(10);

            .el-tabs__nav-wrap {
                height: vh(30);
                line-height: vh(30);
                // min-width: vw1(2000);
                background: rgba(4, 34, 45, 0.37);

                .el-tabs__nav-prev, .el-tabs__nav-next {
                    line-height: vh(30);
                    color: #fff;
                    font-size: vw1(16);
                }

                .el-tabs__item {
                    height: vh(30);
                    min-width: vw1(170);
                    color: #fff;
                    line-height: vh(30);
                    font-size: vw1(16);
                    text-align: center;
                }

                .el-tabs__item.is-active {
                }

                .el-tabs__active-bar {
                    width: vw1(10);
                    background-color: #26cffe;
                }

                &::after {
                    visibility: hidden;
                    // background-color: none;
                }
            }
        }

        .el-tabs__content {
            z-index: 19;
            position: relative;
            // width: vw(350);
            width: 100%;
            height: vh(230);

            .button-box {
                position: absolute;
                right: 0;
                top: vh(10);

                span {
                    width: vw1(40);
                    background: #023245;
                    display: inline-block;
                    height: vw1(40);
                    line-height: vh(40);
                    text-align: center;
                    margin-right: vw1(20);
                    font-size: vw1(30);
                    color: #5cecff;
                    cursor: pointer;
                    border-radius: vw1(6);
                    pointer-events: all;
                }
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        #themePicFxffChart0 {
            // width: vw(330);
            width: 100%;
            height: vh(250);
        }

        #themePicFxffChart1 {
            // width: vw(330);
            width: 100%;
            height: vh(220);
        }

        #themePicFxffChart2 {
            // width: vw(330);
            width: 100%;
            height: vh(220);
        }

        .big {
            background: #052330;
            border: 1px solid #065888;
            height: vh(600);

            .select {
                display: flex;
                width: 70%;
                margin-top: vh(20);
                margin-left: vw1(30);

                .el-input__inner {
                    border-radius: 0;
                    height: vh(50);
                    font-size: vw1(22);
                }

                .el-input__icon {
                    line-height: vh(50);
                }
            }

            .resultNum {
                margin-top: vh(10);
                margin-bottom: vh(10);
                font-size: vw1(30);
                padding-left: vw1(40);
            }

            .table {
                width: 100%;
                height: vh(470);
                padding: vh(5) vw1(40);

                .tBody {
                    height: 85%;
                    overflow: auto;

                    .bodyItem {
                        font-size: vw1(26);
                        border-bottom: 1px solid #103f51;
                        margin-bottom: vh(5);
                        padding-bottom: vh(5);

                        .bodyItem1 {
                            display: flex;

                            p {
                                height: vh(40);
                                line-height: vh(40);
                                font-size: vw1(26);
                            }
                        }

                        .bodyItem2 {
                            display: flex;
                            text-indent: vw1(40);

                            p:nth-child(1) {
                                width: vw1(250);
                            }

                            p:nth-child(2) {
                                width: vw1(400);
                            }
                        }

                        .order {
                            color: #fff;
                        }

                        .pImg {
                            img {
                                width: vw1(20);
                                height: vh(20);
                            }
                        }

                        p:nth-of-type(3) {
                            width: 200px;
                        }

                        p:nth-of-type(4) {
                            width: 300px;
                        }

                        p:nth-of-type(5) {
                            flex: 1;

                            img {
                                vertical-align: middle;
                                margin-right: vw1(10);
                            }
                        }
                    }
                }

                .pagenation {
                    height: 15%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    width: fit-content;
                    margin: 0 auto;

                    .el-pager li, .el-pagination button {
                        width: vw1(40);
                        height: vh(40);
                        line-height: vh(40);
                        font-size: vw1(20);
                    }
                }
            }

            .reportBtn p {
                position: absolute;
                right: vw1(30);
                bottom: vh(30);
                width: vw1(110);
                height: vh(40);
                line-height: vh(40);
                text-align: center;
                background: #0b8fab;
                margin-top: vh(10);
                font-size: vw1(20);
            }

            .el-button {
                background: transparent;
                border: 1px solid #00EAFF;
                color: #fff;
            }

            .el-input__inner {
                background: transparent;
                border: 1px solid #00E5FD;
            }

            .el-input-group__append, .el-input-group__prepend {
                background: transparent;
                border: 1px solid #00E5FD;
            }
        }
    }
}
</style>